| 超详细编写登录注册页面（内含验证码登录） | 您所在的位置：网站首页 › dw 如何写登陆注册 › 超详细编写登录注册页面（内含验证码登录） |
超详细编写登录注册页面（内含验证码登录）
|
最近做项目，着实出师不利，刚登录就遇到bug，特在此记录一下，以此为鉴。首先，说明一下，这个登录页面内含验证码登录，当然也会有验证码验证，还有数据库没有设置加密，当然项目也没有强制要求，主要因为麻烦，索性就不加密了。这篇文章视图、控制器以及插件的代码都齐全，仅供参考，不可盲目复制。 以下便是页面展示。
点击切换，进入注册。
话不多说，进入正题。 首先，在创建一个控制器添加视图。 public ActionResult Login() { return View(); }然后在视图引入下面代码使用到的插件，css、script、layui。Css主要放在head标签里面，script和layui可与css标签放在head标签里面或者div标签后面。在这里注意了，一定要注意引入插件的路径。 以下是视图登录注册div的代码，包括form表单的代码，分别在div里面放有一个input标签，编写了用户名、密码、验证码的代码，以及id、name值，方便后面获取值。 高端智能汽修厂 点击切换 登录账号 @* 登录页面跳转到主页面将不会返回原页面*@下面，主要获取用户名、密码、验证码的值，以及判断验证，开启关闭加载层，提交数据，并且清空数据，设置字符串不为空。 var layer; $('.toggle').click(function () { $(this).children('i').toggleClass('fa-pencil'); $('.form').animate({ height: "toggle", 'padding-top': 'toggle', 'padding-bottom': 'toggle', opacity: "toggle" }, "slow"); }); layui.use(['layer'], function () { layer = layui.layer; }) $("#ValidateCode").click(function () { $(this).prop("src", "/Main/ValidCode"); }); $("#btnSubmit").click(function () { //===登录逻辑Number //获取值 var Number = $('#fmLogin [name="Number"]').val(); var password = $('#fmLogin [name="passWord"]').val(); var validCode = $('#fmLogin [name="validCode"]').val(); //判断是否填写数据 if (strValIsNotNull(Number) && strValIsNotNull(password) && strValIsNotNull(validCode)) { //异步提交 var layerIndex = layer.load();//开启layer加载层 $.post("/Main/UserLogin", { Number: Number, Password: password, validCode: validCode, }, function (msg) { layer.close(layerIndex);//关闭加载层 if (msg.State) { //layer.alert("登录成功"); //登录成功，跳转到主页面 window.location.replace("/Main/Main");//使用replace不会出现后退按钮 } else { layer.alert(msg.Text); //清空密码和验证码 $("#PassWord").val(""); $("#ValidateCode").val(""); //验证码刷新 $("#ValidateCode").click(); } }); } else { layer.alert("登录信息请填写完整"); } }) //字符串值不为空 function strValIsNotNull(strVal) { return strVal != undefined && strVal != null && strVal != ''; }视图结束了，来到控制器，编写控制器的代码。 先写验证码的验证，这里我设置了验证码默认为“123”，不为别的就为了方便，如果你想设置随机生成一个验证码，取消第一行注释就可以了，可以看下面的代码，每一行都有详细的解释。这个可以作为模板，大家需要可以收藏。 public ActionResult ValidCode() { //生成一个随机字符串 验证码 //string strRandom = ValidCodeUtils.GetRandomCode(5); string strRandom = "123"; //将验证码存入Session会话 Session["validCode"] = strRandom; //byte[] 根据验证码产生图片 byte[] imgByte = ValidCodeUtils.CreateImage(strRandom); //返回图片信息 return File(imgByte, @"image/jpeg"); }然后就是登录的验证了，这里获取页面传递过来的数据，并设置去空格，还有存放在session的验证码，为了方便捕获错误我使用了try catch获取，然后判断填入的验证码和session中的验证码是否一致。接着编写用户名和密码的验证，判断是否与数据库的一致。所有验证通过，最后才登录成功。 public ActionResult UserLogin(SYS_Type user) { ReturnJson msg = new ReturnJson(); //获取页面传递的数据 string strNumber = user.Number.Trim();//用户名 string strPassword = user.Password.Trim();//密码 string strValidCode = Request["validCode"].Trim();//验证码 //获取存放在session中的验证码 string sessionValiCode = ""; try { sessionValiCode = Session["validCode"].ToString(); } catch (Exception e) { Console.WriteLine(e); } //判断填入的验证和session中的验证码是否一致 if (sessionValiCode.Equals(strValidCode, StringComparison.InvariantCultureIgnoreCase)) { try { SYS_Type modType = myModel.SYS_Type.Single(m => m.Number == strNumber); if (modType.Password.Equals(strPassword)) { msg.State = true; msg.Text = "登录成功！"; } else { msg.Text = "该用户密码错误！"; } } catch(Exception e) { msg.Text = "该用户不存在！"; } } else { msg.Text = "验证码错误"; } return Json(msg, JsonRequestBehavior.AllowGet); } |
【本文地址】
公司简介
联系我们